<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>我的订单</title>
    <!-- <link rel="dns-prefetch" href=""> -->
    <link rel="stylesheet" href="css/lib/reset.css">
    <link rel="stylesheet" href="libs/swiper/swiper.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/lib/flexible-163.js"></script>
    <script src="js/lib/jquery-2.2.4.min.js"></script>
    <script src="libs/swiper/swiper.min.js"></script>
</head>

<body ontouchstart class="my-order">
    <!-- 返回上一页 -->
    <div class="header">
        <a class="go-back" href="javascript:void(0)" onclick="history.go(-1)">返回</a>
        <h1 class="title">我的订单</h1>
        <span class="service">服务声明</span>
    </div>

    <div class="wrapper">
        <!-- 主体内容部分s -->
        <div class="container">

            <div class="tab-hd">
                <ul>
                    <li class="tab-hd-item active"><span>全部</span></li>
                    <li class="tab-hd-item"><span>待付款</span></li>
                    <li class="tab-hd-item"><span>待收货</span></li>
                    <li class="tab-hd-item"><span>已签收</span></li>
                </ul>
            </div>

            <div class="banner-box">
                <a href="" title="">
                    <img class="banner-img" src="images/banner-pic.jpg" alt="">
                </a>
            </div>

            <div class="tab-bd">

                <!-- 数据拉取 -->
                <!-- <div class="tab-bd-item">

                    <a class="item-link" href="">
                        <div class="item-side">
                            <img class="item-img" src="images/goods-pic.jpg" alt="">
                        </div>
                        <div class="item-detail">
                            <p class="item-name">全部标题：CAMELBAK OCTANE 18X 水袋包  COACH 蔻驰 F54008 女士长款钱包标题：CAMELBAK OCTANE 18X 水袋包  COACH 蔻驰 F54008 女士长款钱包</p>
                            <p class="item-price">
                                <span class="price-now">¥99.88</span>
                                <del class="price-old">¥577.02</del>
                            </p>
                            <p class="item-btn">
                                <span class="btn btn-black">待付款</span>
                                <span class="btn btn-link fr">确认收货</span>
                            </p>
                        </div>
                    </a>

                </div> -->

            </div>


        </div>
    </div>

    <!-- 返回顶部 -->
    <div id="goTop"></div>



<script>
$(function(){

    function getInfos(el,status,page,change){
        $.ajax({
            // url: 'http://shop.rongec.com/test.php',
            url: '/data/orders.json',
            type: 'GET',
            dataType: 'json',
            async:false,
            data:{'status':status,'page':page}
            // data:{}
        })
        .done(function(data) {
            // console.log(data)
            var skuData = data.data.list;
            var skuInfos = [];
            // console.log(skuData);
            var tmp = '';
            for ( var key in skuData ){
                skuInfos.push(skuData[key]);
                // console.log(skuData[key]);
            }
            // console.log(skuInfos);
            for (var i = 0; i < skuInfos.length; i++) {
                var skuId = skuInfos[i].id;  // 产品id
                var skuName = skuInfos[i].title;  // 产品名称
                var skuImg = skuInfos[i].thumb;  // 产品图片
                var skuPrice = skuInfos[i].price;  // 市场价格
                var skuStatus = skuInfos[i].status;  // 订单状态

                tmp += '<div class="tab-bd-item" skuId="'+ skuId +'">';
                tmp += '<a class="item-link" href="" title="'+ skuName +'">';
                // 主图
                tmp += '<div class="item-side">';
                tmp += '<img class="item-img" src="'+ skuImg +'" alt="'+ skuName +'">';
                tmp += '</div>';
                // 描述
                tmp += '<div class="item-detail">';
                tmp += '<p class="item-name">'+ skuName +'</p>';
                tmp += '<p class="item-price">';
                tmp += '<span class="price-now">¥99.88</span>';
                tmp += '<del class="price-old">¥577.02</del>';
                tmp += '</p>';
                tmp += '<p class="item-btn">';
                switch ( skuStatus ){
                    case '0':
                        tmp += '<span class="btn btn-black">待处理</span>';
                        break;
                    case '1':
                        tmp += '<span class="btn btn-black">待付款</span>';
                        break;
                    case '3':
                        tmp += '<span class="btn btn-black">待收货</span>';
                        break;
                    case '4':
                        tmp += '<span class="btn btn-black">已签收</span>';
                        break;
                    default:
                        tmp += '<span class="btn btn-black">待付款1</span>';
                        break;
                }
                tmp += '<span class="btn btn-link fr">确认收货</span>';
                tmp += '</p>';
                tmp += '</div>';
                tmp += '</a>';
                tmp += '</div>';
            }
            // console.log(tmp);
            if (change) {
                $(el).html('')
            }
            $(el).append(tmp);
        })
        .fail(function() {
            console.log("获取数据失败");
        })
        .always(function() {
            // console.log("complete");
        });

    }
    // 第一次自动加载
    localStorage.setItem('status',9);
    getInfos('.tab-bd',localStorage.getItem('status'),1,true);

    var tabHei = $('.tab-hd').height();
    var page = 1; //分页码
    var pageStatus = false; //分页开关


    //点击导航切换
    $('.tab-hd li').on('click',function(){
        $(window).scrollTop(0);
        $('.tab-hd .active').removeClass('active');
        $(this).addClass("active");
        var INDEX = $(this).index();
        // console.log(INDEX)
        switch( INDEX ){
            case 0:
                // 全部
                localStorage.setItem('status',9);
                getInfos('.tab-bd',localStorage.getItem('status'),page,true);
                // console.log('全部' + localStorage.getItem('status'))
                break;
            case 1:
                // 待付款
                localStorage.setItem('status',1);
                getInfos('.tab-bd',localStorage.getItem('status'),page,true);
                // console.log('待付款' + localStorage.getItem('status'))
                break;
            case 2:
                // 待收货
                localStorage.setItem('status',3);
                getInfos('.tab-bd',localStorage.getItem('status'),page,true);
                // console.log('待收货' + localStorage.getItem('status'))
                break;
            case 3:
                // 已签收
                localStorage.setItem('status',4);
                getInfos('.tab-bd',localStorage.getItem('status'),page,true);
                // console.log('已签收' + localStorage.getItem('status'))
                break;
            default:
                localStorage.setItem('status',9);
                getInfos('.tab-bd',localStorage.getItem('status'),page,true);
                // console.log('全部' + localStorage.getItem('status'))
                break;
        }
    });

    // 翻页及tab切换固定
    $(window).scroll(function() {
        if( $(window).scrollTop() > tabHei ) {
            $('.tab-hd').css({
                position: 'fixed',
                left: 0,
                top: 0
            });
        } else {
            $('.tab-hd').css({
                position: 'relative'
            });
        }

        //翻页
        var $scrollTop = $(window).scrollTop();    //滚动条距离顶部的高度
        var $scrollHeight = $(document).height();   //当前页面的总高度
        var $clientHeight = $(window).height();    //当前可视的页面高度
        var status = localStorage.getItem('status');
        if ($scrollTop + $clientHeight >= $scrollHeight) {
            page++;
            getInfos('.tab-bd',status,page);
            // console.log(status + '第' + page + '页');
        } else if($scrollTop<=0){
            page = 1;
            getInfos('.tab-bd',status,page);
        }
    });

});
</script>

</body>

</html>
